<template>
	<view class="task_release">
		<view class="task_l_item f f_align">
			<view class="task_i_label bold">
				项目标题<text class="request">*</text>
			</view>
			<input v-model="itemName" type="text" maxlength="20" placeholder-style="placeStyle" placeholder="请输入项目标题(20字内)">
		</view>
		<view class="task_l_item f f_column">
			<view class="task_i_label bold">
				项目内容<text class="request">*</text>
			</view>
			<textarea v-model="itemDetail" :auto-height="true" :maxlength="1000" placeholder="请输入项目内容" />
		</view>
		<view class="task_l_item noMb f f_column">
			<view class="task_i_label bold">
				封面<text class="request">*</text>
			</view>
			<view class="upload_f_warp f f_warp">
				<view class="upload_files_warp" v-if="headImg != ''">
					<view class="upload_files file" @click="$wathcImg([headImg])">
						<i class="iconfont close" @click="deleteFilesHead()">&#xe703;</i>
						<image class="autoImg" :src="headImg" mode=""></image>
					</view>
				</view>
				<view class="upload_files_warp" v-else @click="uploadFileHead">
					<view class="upload_files">
						<i class="iconfont">&#xe6f1;</i>
					</view>
				</view>
			</view>
		</view>
		<view class="task_l_item f f_column">
			<view class="task_i_label bold">
				项目图片
			</view>
			<view class="upload_f_warp f f_warp">
				<view class="upload_files_warp" v-for="(item,index) in detailImgList" :key="index">
					<view class="upload_files file" @click="$wathcImg(detailImgList)">
						<i class="iconfont close" @click="deleteFiles(index)">&#xe703;</i>
						<image class="autoImg" :src="item" mode=""></image>
					</view>
				</view>
				<view v-if="detailImgList.length < 9" class="upload_files_warp" @click="uploadFile">
					<view class="upload_files">
						<i class="iconfont">&#xe6f1;</i>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="task_l_item noMb f f_align">
			<view class="task_i_label bold">
				首页轮播(7:00 - 24:00)
			</view>
			<switch checked color="#2989FD" style="transform:scale(0.7)" />
		</view>
		<view class="task_l_item bt f f_align">
			<view class="task_i_label bold">
				轮播次数
			</view>
			<view class="f f_align f_align_center">
				<input type="number" maxlength="20" placeholder-style="placeStyle" placeholder="请输入轮播次数">
				<view class="">次</view>
			</view>
		</view>
		<view class="task_l_item noMb f f_align">
			<view class="task_i_label bold">
				固定头条
			</view>
			<switch checked color="#2989FD" style="transform:scale(0.7)" />
		</view>
		<view class="task_l_item bt f f_align">
			<view class="task_i_label bold">
				推广天数
			</view>
			<view class="f f_align f_align_center">
				<input type="number" maxlength="20" placeholder-style="placeStyle" placeholder="请输入推广天数">
				<view class="">天</view>
			</view>
		</view> -->
		<view class="task_l_item noMb f f_column">
			<view class="task_i_label bold">
				项目标签(2个)<text class="request">*</text>
			</view>
			<view class="f f_warp tags_item_warps">
				<view class="tags_item_w" v-for="(item,index) in item_tag_type" :key="index">
					<view
						@click="setTagType(item)"
						:class="itemTagTypeList.indexOf(item.value) != -1 ? 'tags_item active' : 'tags_item'"
					>{{item.label}}</view>
				</view>
			</view>
		</view>

		<view class="f f_align f_align_center step_bottom_btn">
			<view class="f f_price">
				价格：<view class="f_p_j bold">{{goldCoinAmountAll}}<text class="f_p_t">金币</text></view>
			</view>
			<view class="relese_new" @click="nowReserve">
				{{edit ? '立即修改' : '立即发布'}}
			</view>
		</view>

		<!-- 密码验证 -->
		<pwInput ref="pwInput" @input-ok="isOkDone" :isLoading="loadings" />
	</view>
</template>

<script>
	import $uplaod from '@/utils/upload.js'
	import { mapState } from 'vuex'
	import pwInput from '@/components/pwInput/pwInput'
	export default {
		data() {
			return {
				itemName:'',
				itemDetail:'',

				goldCoinAmount:0,
				headImg:'',
				detailImgList:[],
				itemTagTypeList:[],

				edit:false,
				loadings:false
			};
		},
		computed:{
			...mapState({
				item_tag_type:state => state.dictArrs.item_tag_type
			}),
			goldCoinAmountAll:function(){
				return (this.goldCoinAmount).toFixed(2);
			}
		},
		onShow() {
			this.getRechangeRules();
		},
		onLoad(option) {
			this.$store.dispatch('getDictlists','item_tag_type');
			if(option.itemId){
				this.edit = true;
			}
		},
		methods:{
			//选择图片
			uploadFileHead(){
				const _this = this;
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success: async (res) => {
						_this.headImg = await $uplaod(res.tempFilePaths[0]);
					}
				})
			},
			//选择图片
			uploadFile(){
				const _this = this;
				uni.chooseImage({
					count:9,
					sizeType:['compressed'],
					success: async (res) => {
						if((_this.detailImgList.length + res.tempFilePaths.length) <= 9){
							for(let i=0;i<res.tempFilePaths.length;i++){
								let path = await $uplaod(res.tempFilePaths[i]);
								_this.detailImgList.push(path);
							}
						}else{
							_this.$showToast('详情图片最多上传9张哦～')
						}
					}
				})
			},
			//获取任务收费规则
			async getRechangeRules(){
				const _this = this;
				let res = (await _this.$http('/api/auth/charge/rule/getChargeRule','POST','10012001')).data;
				if(res && res.code == '0'){
					_this.goldCoinAmount = res.data.goldCoinAmount;
				}else{
					_this.$showToast(res.msg);
				}
			},
			//删除文件
			deleteFiles(index){
				this.detailImgList.splice(index,1)
			},
			//删除封面
			deleteFilesHead(){
				this.headImg = '';
			},
			//
			setTagType(item){
				const _this = this;
				let bol = true;
				for(let i=0;i<_this.itemTagTypeList.length;i++){
					if(_this.itemTagTypeList[i] == item.value){
						bol = false;
						_this.itemTagTypeList.splice(i,1)
					}
				};
				if(bol && _this.itemTagTypeList.length < 2){
					_this.itemTagTypeList.push(item.value);
				}else{
					_this.$showToast('最多两个标签')
				}

				console.log(_this.itemTagTypeList)
			},
			//立即发布
			async nowReserve(){
				const _this = this;
				if(_this.itemName == ''){
					return _this.$showToast('请先填写项目名称～');
				}
				if(_this.itemDetail == ''){
					return _this.$showToast('请先填写项目详情描述～');
				}

				if(_this.headImg == ''){
					return _this.$showToast('请先上传项目封面图哦～');
				};
				if(_this.detailImgList.length <= 0 || _this.detailImgList.length > 9){
					return _this.$showToast('请上传项目详情图片，最多9张');
				};
				
				//是否设置支付密码
				let userInfo = uni.getStorageSync('userInfo') || '';
				if(userInfo.payPassword && userInfo.payPassword != ''){
					//打开密码验证
					_this.$refs.pwInput.visibleToast = true;
				}else{
					uni.showActionSheet({
						itemList:['未设置支付密码，去设置？'],
						success(e) {
							if(e.tapIndex == 0){
								_this.$navTo('../setting/setting')
							}
						}
					})
				};
			},
			async isOkDone(pw){
				const _this = this;
				_this.loadings = true;
				let res = (await _this.$http('/api/auth/item/createItem','POST',{
					detailImgList:_this.detailImgList,
					headImg:_this.headImg,
					itemName:_this.itemName,
					itemDetail:_this.itemDetail,
					payAmount:_this.goldCoinAmountAll,
					itemType:'10004001',
					itemTagTypeList:_this.itemTagTypeList,
					password:pw
				})).data;
				_this.loadings = false;
				if(res && res.code == 0){
					//关闭密码验证
					_this.$refs.pwInput.visibleToast = false;
					_this.$showToast('项目发布成功啦～');
					_this.itemName = '';
					_this.itemDetail = '';
					_this.headImg = '';
					_this.detailImgList.splice(0);
					_this.itemTagTypeList.splice(0);
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task_release{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F9FE;
		font-size: 28rpx;
		padding-bottom: 140rpx;
		.step_bottom_btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;right: 0;
			height: 98rpx;
			background-color: #fff;
			padding-left: 32rpx;
			.relese_new{
				height: 100%;
				width: 272rpx;
				background-color: $ych_color;
				@include flex_center;
				color: #fff;
				font-size: 36rpx;;
			}
			.f_price{
				font-size: 22rpx;
				color: #1A1A1A;
				align-items: flex-end;
				.f_p_j{
					font-size: 40rpx;
					color: #E6212A;
					padding: 0 6rpx;
					.f_p_t{
						font-size: 22rpx;
					}
				}
			}
		}
		.step_task_t1{
			.title_task{
				background-color: #F6F9FE;
				padding:0 24rpx 16rpx;
			}
			.task_l_item{
				border-bottom: solid 2rpx #E6E6E6;
			}
			.add_step{
				@include flex_center;
				padding: 20rpx 0;
				background-color: #fff;
				color: $ych_color;
			}
		}
		.task_l_item{
			padding: 24rpx;
			background-color: #fff;
			margin-bottom: 16rpx;
			input{width: 80%;}
			.tags_item_warps{
				padding-top: 24rpx;
				.tags_item_w{
					width: 33.3%;
					@include flex_center;
				}
				.tags_item{
					width: 176rpx;height: 56rpx;
					@include flex_center;
					color: #fff;
					background-color: #C2C5CC;
					margin-bottom: 16rpx;
					border-radius: 28rpx;
					&.active{
						background-color: $ych_color;
					}
				}
			}
			&.noMb{
				margin-bottom: 0;
			}
			&.bt{
				border-top: solid 1rpx #E6E6E6;
			}
			.task_i_label{
				min-width: 140rpx;
			}
			input{
				text-align: right;
			}
			textarea{
				margin-top: 24rpx;
				height: 160rpx;
			}
			.upload_f_warp{
				.upload_files_warp{
					width: 33.333%;
				}
				.upload_files{
					width: 200rpx;height: 200rpx;
					background-color: #f6f6f6;
					@include flex_center;
					margin-top: 20rpx;
					position: relative;
					.iconfont{font-size: 48rpx;}
					&.file{
						background-color: #fff;
					}
					.iconfont.close{
						position: absolute;
						font-size: 48rpx;
						top:-15rpx;right: -15rpx;
						color: #FD2929;
						z-index: 10;
					}
				}
			}
		}
	}
</style>
